<template>
  <div class="enter-advertising-info">
    <van-nav-bar title="详情" left-arrow @click-left="back()" />
    <div class="adv-title">
      {{advInfo.title || ''}}
    </div>
    <div class="user-info">
      <div class="img">
        <van-image
          fit="cover"
          width="100%"
          height="100%"
          :src="advInfo.userpic"
        />
      </div>
      <div class="name">
  			{{advInfo.username || ''}}
      </div>
      <div @click="handlerToChat(advInfo)">
          <van-icon name="chat" color="#ccc" size="24px"/>
        </div>



      <!-- <div class="attention">
        <van-icon class="icon" name="star-o" />未关注
      </div> -->
    </div>
    <div class="content">
      <span selectable="false" space="false" decode="false">
  			{{advInfo.text || ''}}
      </span>
      <!-- <van-image
        fit="widthFix"
        width="100%"
        :src="advInfo.userpic"
      /> -->
  		<van-image v-if="advInfo.image" v-for="(item, index) in advInfo.image" :key="index" fit="widthFix" width="100%" :src="item" />
    </div>
    <div class="share-info">
      <div>
			  {{advInfo.create_time}}
      </div>
      <div v-if="!!advInfo.phone">
        <van-icon class="icon" color="#9aa9c9" name="phone-o" />电话
      </div>
    </div>
    <div class="share-info" style="padding-bottom: 20px">
      <div class="img">
        <van-image
          fit="cover"
          width="100%"
          height="100%"
          :src="advInfo.userpic"
        />
      </div>
      <div>{{advInfo.cnt}}浏览</div>
    </div>

    <div class="footer-box">
      <div class="header">
        <div class="item selector">
          评价
        </div>
        <!-- <div class="item">
          点赞
        </div>
        <div class="item">
          转发
        </div> -->
      </div>
      <div class="content">
        <!-- <van-empty image="search" description="暂无数据" /> -->
        <div class="reply-list">
          <div
            class="reply-item"
             v-fb="{cls: 'btn-active'}"
            @click="onRevert(advInfo, chat)"
            v-for="(chat, chatIndex) in advInfo.chat"
            :key="chatIndex"
          >
            <span style="color: #4f68b4;font-weight: bold;">
              {{ chat.name1 }}{{ chat.name2 ? "" : "：" }}
            </span>
            {{ chat.name2 ? "回复" : "" }}
            <span v-if="chat.name2" style="color: #4f68b4;font-weight: bold;">
              {{ chat.name2 }}：
            </span>
            {{ chat.text }}
          </div>
        </div>
      </div>
    </div>

    <div class="function-box">
      <div class="item" @click="onRevert(advInfo)">
        <van-icon class="icon" name="comment-o" />
        评价
      </div>
      <div class="item" @click="switchLike">
        <van-icon class="icon" :color="advInfo.is_point ? '#ee8a39' : ''" :name="advInfo.is_point ? 'good-job' : 'good-job-o'" />
        赞
      </div>
      <!-- <div class="item">
        <van-icon
          class="icon"
          style="transform: rotate(180deg);"
          name="good-job-o"
        />
        踩
      </div> -->
      <div v-if="!!$route.query.isSelf" class="item" @click="jump('advertisingCreate', {id: advInfo.id})" style="flex: 1;text-align: right;padding: 0;">
        <van-icon class="icon" name="records" />
        修改
      </div>
    </div>
    <div z-index="100" v-show="showEvaluate"  @click="showEvaluate = false">
      <div class="wrapper">
        <input ref="inputVal" bindfocus="inputFocus" @blur="onBlur" v-model="evaluateValue" @keyup.enter="onBindconfirm" type="text" :placeholder="placeholderEvaluate"></input>
        <button @click="onBindconfirm">发送</button>
      </div>
    </div>
  </div>
</template>
<script>
import { adv_point, adv_detail, add_adv_chat } from "../../../api/ajax";
export default {
  data() {
    return {
      showEvaluate: false,
      advInfo: {},
      id: '',
      currentAdv: {},
      evaluateValue: '',
      inputBottom: 0,
      placeholderEvaluate: '请输入评论内容',
      scrollTop: 0
    };
  },
  mounted() {
    this.getAdvDetail();
  },
  methods: {
    handlerToChat(item) {
      window.location.href = `https://wecan.keinadd.com/mobile/chat/create_room?type=1&aim_id=${item.uid}`;
    },
    onBlur() {
      window.scroll(0,this.scrollTop);
      setTimeout(() => {
        if(this.evaluateValue) return;
        this.showEvaluate = false;
      }, 300)
    },
    onBindconfirm() {
      if(!this.evaluateValue) return;
      add_adv_chat({
        text: this.evaluateValue,
        ...this.currentAdv
      }).then(res => {
        this.getAdvDetail();
        this.evaluateValue = '';
        this.onBlur();
      })
    },
    onRevert(item, chat) {
      const { uid, name1 } = chat || {};
      const { id } = item;
      var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
      this.scrollTop = top || 0;
      this.placeholderEvaluate = '请输入评论内容';
      if(uid !== undefined) {
        this.placeholderEvaluate = '回复' + name1;
      }
      this.showEvaluate = true;
      this.$nextTick(() => {
        this.$refs.inputVal.focus()
      })
      this.currentAdv = {
        adv_id: id,
        parent_id: 0,
        retry_uid: uid || 0
      }
    },
    switchLike() {
      const { id, is_point } = this.advInfo;
      adv_point({
        id,
        type: is_point ? 2 : 1
      }).then(res => {
        this.getAdvDetail();
      });
    },
    getAdvDetail() {
      const { id } = this.$route.query;
      adv_detail({ id }).then(res => {
        if(res.code === 1) {
          res.data.create_time = this.dateTrunQuantum(res.data.create_time);
          this.advInfo = res.data || {}
        }
      })
    },
  }
};
</script>
<style lang="scss">
.btn-active {
  background: #ccc !important;
}
.enter-advertising-info {
  * {
    box-sizing: border-box;
  }
  .wrapper {
      background-color: #f6f6f6;
      height: 60px;
      box-sizing: border-box;
      position: fixed;
      bottom: 0px;
      left: 0;
      width: 100%;
      z-index: 100;
      padding: 10px;
      z-index: 100;
      display: flex;
      input {
          box-sizing: border-box;
          border: 1px solid #eeeeee;
          border-radius: 4px;
          background-color: #fff;
          width: 100%;
          height: 100%;
          padding-left: 10px;
      }
      button {
        border: 0 none;
        background-color: #ee8a39;
        color: #fff;
        padding: 0 20px;
        width: 100px;
      }
  }
  .reply-list {
    .reply-item {
      padding-top: 5px;
      padding-bottom: 5px;
      color: #5a5a5a;
    }
  }
  .adv-title {
      background-color: #fff;
      padding: 10px;
      font-size: 16px;
      color: #333;
      font-weight: bold;
      border-bottom: 1px solid #eee;
  }
  .user-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 10px;
    background-color: #fff;
    .img {
      border-radius: 50%;
      overflow: hidden;
      height: 30px;
      width: 30px;
    }
    .name {
      flex: 1;
      padding-left: 10px;
      color: #222222;
    }
    .attention {
      padding: 4px 15px;
      border: 1px solid rgb(172, 172, 172);
      border-radius: 40px;
      color: rgb(172, 172, 172);
      .icon {
        color: #666;
        font-size: 14px;
        margin-right: 2px;
        transform: translateY(1px);
      }
    }
  }
  .content {
    padding: 0 10px;
    background-color: #fff;
    font-size: 14px;
    color: #333;
    span {
      padding-bottom: 10px;
    }
  }
  .share-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    color: #666;
    background-color: #fff;
    .img {
      width: 30px;
      height: 30px;
      border-radius: 4px;
      overflow: hidden;
    }
    .icon {
      font-size: 18px;
      transform: translateY(3px);
      margin-right: 4px;
    }
  }
  .footer-box {
    margin-top: 10px;
    padding-bottom: 200px;
    .header {
      height: 50px;
      display: flex;
      align-items: center;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      color: #666;
      font-size: 14px;
      .item {
        padding: 0 10px;
        position: relative;
        &.selector {
          color: #333;
          &::after {
            content: "";
            display: inline-block;
            width: 20px;
            height: 2px;
            background-color: #ec8031;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: -14px;
          }
        }
      }
    }
  }
  .function-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding: 0 10px;
    font-size: 16;
    // transform: rotate(180deg);
    .item {
      padding-right: 20px;
      .icon {
        font-size: 20px;
        vertical-align: middle;
        position: relative;
        top: -3px;
      }
    }
  }
}
</style>
